Jejak pengalaman belajar dan sharing IT saya, semua tertuang disini.
Jejak pengalaman belajar dan sharing IT saya, semua tertuang disini.
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Typography dalam Bootstrap digunakan untuk mengatur tampilan teks agar lebih rapi, menarik, dan mudah dibaca. Bootstrap menyediakan berbagai class yang memudahkan developer dalam mengatur ukuran teks, warna, perataan, serta penekanan teks tanpa harus menulis CSS tambahan.
Dengan memanfaatkan typography Bootstrap, tampilan teks pada website menjadi lebih konsisten dan profesional.
Bootstrap mendukung penggunaan heading HTML dari <h1> hingga <h6> untuk menunjukkan tingkat pentingnya sebuah judul.
Contoh penggunaan:
<h1>Judul H1</h1><h2>Judul H2</h2><h3>Judul H3</h3><h4>Judul H4</h4><h5>Judul H5</h5><h6>Judul H6</h6>Semakin kecil angka heading, maka ukuran teks semakin kecil.
Bootstrap juga menyediakan class tambahan untuk mengatur ukuran heading tanpa harus menggunakan tag HTML:
<p class="h1">Teks seperti H1</p><p class="h3">Teks seperti H3</p>Bootstrap menyediakan class untuk mengatur perataan teks.
| Class | Fungsi |
|---|---|
| text-start | rata kiri |
| text-center | rata tengah |
| text-end | rata kanan |
Contoh:
<p class="text-center">Teks di tengah</p><p class="text-end">Teks di kanan</p>Class ini sangat berguna untuk mengatur layout teks pada website.
Bootstrap menyediakan berbagai pilihan warna teks yang siap digunakan.
| Class | Warna |
|---|---|
| text-primary | biru |
| text-success | hijau |
| text-danger | merah |
| text-warning | kuning |
| text-info | biru muda |
| text-dark | hitam |
| text-muted | abu-abu |
Contoh:
<p class="text-primary">Teks biru</p><p class="text-danger">Teks merah</p>Penggunaan warna ini membantu memberikan penekanan informasi pada teks.
Bootstrap menyediakan class untuk mengatur ketebalan teks (font weight).
| Class | Fungsi |
|---|---|
| fw-bold | teks tebal |
| fw-normal | teks normal |
| fw-light | teks tipis |
Contoh:
<p class="fw-bold">Teks tebal</p><p class="fw-light">Teks tipis</p>Font weight digunakan untuk menekankan bagian penting dari teks.
Lead text digunakan untuk membuat paragraf terlihat lebih menonjol dibandingkan teks biasa.
Biasanya digunakan pada:
Contoh:
<p class="lead">Ini adalah teks utama yang lebih menonjol</p>Teks dengan class lead memiliki ukuran lebih besar dan lebih nyaman dibaca.
Typography pada Bootstrap memudahkan developer dalam mengatur tampilan teks seperti heading, perataan, warna, ketebalan, dan penekanan teks menggunakan class yang sudah tersedia. Dengan memanfaatkan fitur ini, tampilan website menjadi lebih rapi, konsisten, dan profesional tanpa perlu menulis CSS tambahan. Penguasaan typography sangat penting untuk meningkatkan kualitas tampilan dan pengalaman pengguna pada website.